<ion-header id='contact-list-header'>
    <ion-navbar>
        <ion-title>通讯录</ion-title>
        <ion-buttons end (click)="loadListData('server')">
            <button ion-button icon-only>
                <ion-icon name="refresh-circle"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
    <ion-toolbar no-border-top>
        <ion-searchbar [(ngModel)]="queryText" type="text" (ionInput)="updateList()" (ionCancel)="onSearchCancel($event)" showCancelButton="true" cancelButtonText="取消" placeholder="输入首字母拼音或者中文进行搜索人">
        </ion-searchbar>
    </ion-toolbar>
</ion-header>
<ion-content id="contact-list-content">
    <ion-list [virtualScroll]="listData" [headerFn]="listHeader" approxItemHeight='53px' approxHeaderHeight="42px">
        <ion-item-divider *virtualHeader="let header">
            {{ header.toUpperCase() }}
        </ion-item-divider>
        <ion-item *virtualItem="let item" (click)="goDetailPage(item)">
            <ion-icon name="contact" item-left></ion-icon>
            <!-- <img *ngIf="item.empphoto" src="{{serverUrl}}api/v1/common/img?access_token={{userToken}}&url={{item.empphoto}}&resize=true"> -->
            {{item.emname}}
            <ion-note item-right *ngIf="item.first_orgnames">
                {{(_.sortBy(item.first_orgnames, ['sort']))[0].name}}
            </ion-note>
        </ion-item>
    </ion-list>
</ion-content>
<div class="list-bar">
    <div class="bar-content" [style.padding-top.px]="paddingTagHeight">
        <div class="contact-bar-item" [ngClass]="{active: item.name==selectTag.name}" [style.height.px]="tagHeight" [style.line-height.px]="tagHeight" *ngFor="let item of tagList" (click)="scrollList(item)"> {{item.name.toUpperCase()}}
        </div>
    </div>
</div>
<div class="contact-list-tips" [style.top.px]="headerHeight+10" *ngIf="selectTag.name">
    <div class="tag-title" (click)="hideTips()">{{selectTag.name.toUpperCase()}}</div>
    <ion-scroll scrollY="true" [style.height.px]="displayHeight-100">
        <div class="tag-item" [ngClass]="{'active': item==selectTatName}" *ngFor="let item of selectTag.tag" (click)="selectTagName(item)">{{item}}</div>
    </ion-scroll>
</div>
